<template>
  <div class="video-detail">
    <el-container class="video-container">
      <el-aside class="video-aside">
        <div class="input_video">
          <video-player class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions">
          </video-player>
        </div>
        <el-button v-show="ownVideo" class="video-edit-button" type="primary" icon="el-icon-edit" @click="video_edit(video)">编辑视频信息
        </el-button>
      </el-aside>
      <el-main class="video-main">
        <el-divider></el-divider>
        <span style="margin-right: 10px">视频Id：</span>
        <span style="margin-left: 10px">{{ video.videoId }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">视频名称：</span>
        <span style="margin-left: 10px">{{ video.videoName }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">产品名称：</span>
        <span style="margin-left: 10px">{{ video.productName }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">投放平台：</span>
        <span style="margin-left: 10px">{{ video.platformName }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">行业：</span>
        <span style="margin-left: 10px">{{ video.industryName }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">类型：</span>
        <span style="margin-left: 10px">{{ video.categoryName }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">代理商的简称：</span>
        <span style="margin-left: 10px">
          <router-link :to="{name: 'userDetail', params: {userId: video.userId}}">{{ video.userName }}</router-link>
        </span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">上传时间：</span>
        <span style="margin-left: 10px">{{ video.createTime }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">消费金额(30天):</span>
        <span style="margin-left: 10px">{{ format_data(video.consumptionAmount) }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">点击率(30天):</span>
        <span style="margin-left: 10px">{{ format_percentage(video.clickRate) }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">转化率(30天):</span>
        <span style="margin-left: 10px">{{ format_percentage(video.conversionRate) }}</span>
        <el-divider></el-divider>
        <span style="margin-right: 10px">完播率(30天):</span>
        <span style="margin-left: 10px">{{ format_percentage(video.finishRate) }}</span>
        <el-divider></el-divider>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {getVideoDetail} from '../api/index'
import SignUpPage from './SignUp'
import numeral from 'numeral'

export default {
  name: 'VideoDetail',
  components: {SignUpPage},
  data () {
    return {
      video: '',
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: '',
          src: 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
        }],
        poster: '', //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,//当前时间和持续时间的分隔符
          durationDisplay: true,//显示持续时间
          remainingTimeDisplay: false,//是否显示剩余时间功能
          fullscreenToggle: true  //全屏按钮
        }
      },
      ownVideo: false,
      userId: ''
    }
  },

  mounted () {
    this.getVideoDetail()
    this.userId = this.$store.getters.userId
  },

  methods: {
    getVideoDetail () {
      let _this = this
      const videoId = this.$route.params.videoId
      getVideoDetail(videoId).then(res => {
        this.video = res.data
        this.playerOptions.sources[0].src = res.data.videoPath
        this.ownVideo = this.userId === res.data.userId
      }).catch(error => {
        console.log(error)
      })
    },

    format_percentage (data) {
      return numeral(data).format('0.00%')
    },

    format_data (data) {
      return numeral(data).format('0.00')
    },

    video_edit (video) {
      this.$router.push({name: 'videoEdit', params: {videoId: video.id}})
    }
  }
}
</script>

<style scoped>
.video-detail {
  height: 100%;
  width: 100%;
  background-color: white;
  min-height: 500px;
}

.video-container {
  height: 100%;
  width: 100%;
  min-height: 500px;
}

.video-aside {
  height: 100%;
  width: 50% !important;
  margin: 0;
  padding-top: 50px;
  padding-left: 50px;
  min-height: 100px;
}

.video-main {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100px;
}

.video-img {
  padding-top: 100px;
}

.input_video {
  width: 90%;
  height: 100%;
}

.video-edit-button {
  margin-top: 10px;
  margin-left: 100px;
}
</style>
